import { Button } from 'antd-mobile'
import styles from '../css/MyDate.module.css'
import { useSearchParams } from 'react-router-dom'
import dayjs from 'dayjs'


const weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']

function MyDate() {
  const [sp, setSP] = useSearchParams()
  const dtStr = sp.get('date')
  const dt = dayjs(Number(dtStr) || dtStr)

  const nowStr = dt.format('M月D日') + weeks[dt.day()]

  const setDate = (n) => {
    const newDtStr = dt.add(n, 'day').format('YYYY-MM-DD')
    console.log(newDtStr);
    setSP({ ...Object.fromEntries(sp), date: newDtStr })
  }
  return (
    <div className={styles.dateBox}>
      <Button
        color="primary"
        fill="none"
        disabled={dayjs().isSame(dt, 'date')}
        onClick={() => setDate(-1)}
      >
        前一天
      </Button>
      <span>{nowStr}</span>
      <Button
        color="primary"
        fill="none"
        disabled={Math.ceil(dt.diff(dayjs(), 'day', true)) >= 4}
        onClick={() => setDate(1)}
      >
        后一天
      </Button>
    </div>
  )
}

export default MyDate
